<template>
  <div class="dashboard-container">
    <h1>仪表盘</h1>
    <div>
      <label for="grade">年级</label>
      <select id="grade" v-model="grade">
        <option value="三年级">三年级</option>
        <option value="四年级">四年级</option>
        <option value="五年级">五年级</option>
        <option value="六年级">六年级</option>
        <option value="七年级">七年级</option>
        <option value="八年级">八年级</option>
        <option value="九年级">九年级</option>
      </select>
    </div>
    <div>
      <label for="semester">学期</label>
      <select id="semester" v-model="semester">
        <option value="上学期">上学期</option>
        <option value="下学期">下学期</option>
      </select>
    </div>
    <div>
      <label for="subject">学科</label>
      <select id="subject" v-model="subject">
        <option value="数学">数学</option>
        <option value="物理">物理</option>
        <option value="化学">化学</option>
        <option value="语文">语文</option>
        <option value="英语">英语</option>
        <option value="生物">生物</option>
        <option value="地理">地理</option>
        <option value="历史">历史</option>
        <option value="思想品德">思想品德</option>
      </select>
    </div>
    <div>
      <label for="chapter">章节</label>
      <select id="chapter" v-model="chapter">
        <option value="第一章">第一章</option>
        <option value="第二章">第二章</option>
        <option value="第三章">第三章</option>
      </select>
    </div>
    <button @click="goToLearning">基础学习</button>
    <button @click="goToPractice">阶段练习</button>
    <button @click="goToAnalysis">能力提升</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grade: "",
      semester: "",
      subject: "",
      chapter: "",
    };
  },
  methods: {
    goToLearning() {
      this.$router.push("/learning");
    },
    goToPractice() {
      this.$router.push("/practice");
    },
    goToAnalysis() {
      this.$router.push("/analysis");
    },
  },
};
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>
